<template>
  <view class="result">
    <view class="result-main" v-for="(item,index) in dataLts" v-bind:key="item.QuestionId">
      <view class="pingjiaFlag" v-if="pingjiaFlag" @click.self="pingjiaFlag = false">
        <view class="in-pingjiaFlag">
          <view class="close" @click="closeModel(item.QuestionId)">
            ×
          </view>
          <view class="in-pingjiaFlag-title">
            请给客服评价
          </view>
          <view class="in-pingjiaFlag-bd">
            <text class="bumanyi-cm" v-bind:class="{'bumanyi':isFull == 3}" @click="changeFull(3)">
              不满意
            </text>
            <text class="yiban-cm" v-bind:class="{'yiban':isFull == 2}" @click="changeFull(2)">
              一般
            </text>
            <text class="manyi-cm" v-bind:class="{'manyi':isFull == 1}" @click="changeFull(1)">
              满意
            </text>
          </view>
          <view class="pinjia-sure" @click="closeModel2(item.QuestionId)">
            确定
          </view>
        </view>

      </view>
      <view class="result-title">
        <text class="result-time">事件ID:{{item.QuestionNumber}}</text><text
          class="result-action">{{item.State == 1 ?'已处理':item.State == 2 ?'处理中':item.State == 5? '未处理':''}}</text>
      </view>
      <view class="wenti_desc">
        <view class="wenti_desc_title">
          问题描述
        </view>
        <view class="wenti_desc_info">
          {{item.QuestionInfo}}
        </view>
      </view>
      <view class="show_chuli" v-show="item.State == 1">
        <view class="wenti_desc">
          <view class="wenti_desc_title">
            处理结果：
          </view>
          <view class="wenti_desc_info" v-html="item.ReplyContent">
          </view>
        </view>
        <view class="service">
          <view>处理人员:<uni-icons type="headphones" size="20" style="margin:0 10rpx"></uni-icons>
            <text>{{item.ReplyUserName}}</text>
          </view>
          <text>处理时间：{{jsonTime(item.ReplyTime*1000)}}</text>
        </view>
        <view class="pingjia" style="margin-bottom:30rpx;">
          <text>您对以上客服代表的回复是否满意？</text>
          <text class="pj-btn" v-show="item.evalution_str == 0" @click="openPingjia(item.QuestionId)">点击评价></text>
          <text class="pj-btn" v-show="item.evalution_str == 1">满意</text>
          <text class="pj-btn" v-show="item.evalution_str == 2">一般</text>
          <text class="pj-btn" v-show="item.evalution_str == 3">不满意</text>
        </view>
      </view>

      <view class="new-question" v-show="dataLts.length == 1">
        <view class="txt-desc3">
          <view class="txt-desc3-title">
            <text>上传截图</text>
            <view> <text style="color:#F05552;">{{imageValue.length}}</text>/3</view>
          </view>
          <view class="up-pic">
            <uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-position="top">
              <uni-forms-item label="图片上传">
                <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
                  @delete="delIMG" limit="3">
                  <image src="https://img.5211game.com/Base/xiaochengxu/static/add.png" mode=""></image>
                </uni-file-picker>
              </uni-forms-item>
            </uni-forms>
            </uni-file-picker>
          </view>
        </view>
        <view class="new-question-title">
          补充问题描述：
        </view>
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入问题描述（最多500字）" v-model="bu_questionInfo"></textarea>
        <view class="new-question-btn" @click="buQuest(item.QuestionId)">
          补充问题提交
        </view>
      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        orderid: '',
        dataLts: [],
        imageValue: [],
        pingjiaFlag: false,
        value: '',
        isFull: 0,
        bu_questionInfo: '',
        qid: ''
      };
    },
    onLoad(options) {
      this.orderid = options.orderId;
      this.getResultData();
    },
    methods: {
      openPingjia(qid) {
        console.log(qid)
        this.pingjiaFlag = true;
        this.qid = qid
        this.isFull = 0;
      },
      closeModel() {
        this.qid = '';
        this.pingjiaFlag = false;
      },
      closeModel2() {
        this.pingjiaFlag = false;
        this.updateEva(this.qid)
      },
      changeFull(val) {
        this.isFull = val;
      },
      jsonTime(jsondate) {
        var date = new Date(parseInt(jsondate, 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minute;
      },
      getResultData() {
        const dataString = {
          OrderId: this.orderid
        }
        uni.request({
          url: `https://zxkf.5211game.com/QSWebApi/KfApplet/Action?data=${JSON.stringify(dataString)}&t=KfAppletXqQuery`,
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          method: 'GET', //请求方式，必须为大写
          success: (res) => {
            console.log(res)
            res.data.data.forEach(item => {
              this.Evaluation(item.QuestionId, res.data.data)
            })

          }
        })
      },
      //查询评价
      Evaluation(QuestionId, lts) {
        debugger
        const dataString = {
          questionId: QuestionId
        }
        uni.request({
          url: `https://zxkf.5211game.com/QSWebApi/KfApplet/Action?data=${JSON.stringify(dataString)}&t=KfAppletQueryEvaluation`,
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          method: 'GET', //请求方式，必须为大写
          success: (res) => {
            console.log(11, res.data.data)
            lts.forEach(obj => {
              res.data.data.forEach(item => {
                if (obj.QuestionId == item.QuestionId) {
                  this.$set(obj, 'evalution_str', item.EvaluationType)
                }
              })
            })
            this.dataLts = lts;
            console.log(this.dataLts)
          }
        })
      },
      //更改评价
      updateEva(QuestionId) {
        if (this.isFull == '') {
          uni.showModal({
            title: '还未选择服务评价',
            duration: 2000,
            showCancel: false, //没有取消按钮的弹框
            buttonText: '确定'
          });
          return;
        }

        const dataString = {
          questionId: QuestionId,
          EvaluationType: this.isFull
        }
        uni.request({
          url: `https://zxkf.5211game.com/QSWebApi/KfApplet/Action?data=${JSON.stringify(dataString)}&t=KfAppletUpEvaluation`,
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          method: 'GET', //请求方式，必须为大写
          success: (res) => {
            console.log(res);
            uni.showModal({
              title: res.data.msg,
              duration: 2000,
              showCancel: false, //没有取消按钮的弹框
              buttonText: '确定'
            });
            this.qid = '';
            this.getResultData();
          }
        })
      },
      //补充问题提交
      buQuest(QuestionId) {
        if (this.bu_questionInfo == '') {
          uni.showModal({
            title: '请先填写补充问题!',
            duration: 2000,
            showCancel: false, //没有取消按钮的弹框
            buttonText: '确定'
          });
          return
        }
        var img1, img2, img3;
         if(this.imageValue.length>0){
           this.imageValue.forEach((item, index) => {
             if (index == 0) {
               img1 = item.url
             } else if (index == 1) {
               img2 = item.url
             } else if (index == 2) {
               img3 = item.url
             }
           })
         }
        const dataString = {
          questionId: QuestionId,
          questionInfo: this.bu_questionInfo,
          img1: img1,
          img2: img2,
          img3: img3
        }
        uni.request({
          url: `https://zxkf.5211game.com/QSWebApi/KfApplet/Action?data=${JSON.stringify(dataString)}&t=KfAppletQuest`,
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          method: 'GET', //请求方式，必须为大写
          success: (res) => {
            console.log(res);
            this.imageValue = [];
            uni.showModal({
              title: res.data.msg,
              duration: 2000,
              showCancel: false, //没有取消按钮的弹框
              buttonText: '确定'
            });
            this.getResultData();
          }
        })
      },
      // 获取上传状态
      select(e) {
        const tempFilePaths = e.tempFilePaths;
        const imgUrl = tempFilePaths[0];
        uni.showLoading({
          title:"上传中...",
          mask:true
        })
        wx.uploadFile({
          url: 'https://zxkf.5211game.com/QSWebApi/KfApplet/Action?t=imgUpLoad',
          filePath: imgUrl,
          name: 'imgUrl',
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: (uploadFileRes) => {
             uni.hideLoading();
             if(JSON.parse(uploadFileRes.data).code == 0){
               //console.log('uploadFileRes', JSON.parse(uploadFileRes.data));
                 let path = JSON.parse(uploadFileRes.data)
               //  console.log(path.data)
                 // 后端返回的地址，存入图片地址
                 this.imageValue.push({
                   url: path.data[0].img,
                   name: ''
                 })
                // console.log('imageValue', this.imageValue)
             }else{
               uni.showModal({
                title:'上传失败',
                 duration: 2000,
                 showCancel: false, //没有取消按钮的弹框
                 buttonText: '确定'
               });
             }
          }
        });
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },
      //图片删除
      delIMG(e) {
        console.log('456', e)
        const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
        this.imageValue.splice(num, 1);
      },
      // 上传成功
      success(e) {
        console.log('上传成功')
      },
      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      },
    }
  }
</script>

<style lang="scss">
  body {
    background-color: #fff;
  }

  .result {
    padding-bottom: 100rpx;
    position: relative;

    .pingjiaFlag {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index:2;
      .in-pingjiaFlag {
        width: 600rpx;
        height: 366rpx;
        background: #FFFFFF;
        border-radius: 12rpx;
        position: relative;

        .pinjia-sure {
          width: 157rpx;
          height: 68rpx;
          line-height: 68rpx;
          text-align: center;
          background: #FFA000;
          border-radius: 10rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #fff;
          margin: 0 auto;
          margin-top: 70rpx;
        }

        .close {
          width: 40rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          font-size: 30rpx;
          color: #000;
          position: absolute;
          top: 10rpx;
          right: 10rpx;
        }

        .in-pingjiaFlag-title {
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          margin-bottom: 30rpx;
        }

        .in-pingjiaFlag-bd {
          width: 100%;
          display: flex;
          justify-content: center;

          .bumanyi-cm {
            width: 77rpx;
            height: 85rpx;
            display: block;
            background: url(https://img.5211game.com/Base/xiaochengxu/static/icon-butuijian-cm.png);
            background-size: cover;
            margin: 0 30rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 200rpx;
          }

          .bumanyi {
            width: 77rpx;
            height: 85rpx;
            display: block;
            background: url(https://img.5211game.com/Base/xiaochengxu/static/icon-butuijian.png);
            background-size: cover;
            margin: 0 30rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 200rpx;
          }

          .yiban-cm {
            width: 77rpx;
            height: 85rpx;
            display: block;
            background: url(https://img.5211game.com/Base/xiaochengxu/static/icon-yiban-cm.png);
            background-size: cover;
            margin: 0 30rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 200rpx;
          }

          .yiban {
            width: 77rpx;
            height: 85rpx;
            display: block;
            background: url(https://img.5211game.com/Base/xiaochengxu/static/icon-yiban.png);
            background-size: cover;
            margin: 0 30rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 200rpx;
          }

          .manyi-cm {
            width: 77rpx;
            height: 85rpx;
            display: block;
            background: url(https://img.5211game.com/Base/xiaochengxu/static/icon-tuijian-cm.png);
            background-size: cover;
            margin: 0 30rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 200rpx;
          }

          .manyi {
            width: 77rpx;
            height: 85rpx;
            display: block;
            background: url(https://img.5211game.com/Base/xiaochengxu/static/icon-tuijian.png);
            background-size: cover;
            margin: 0 30rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 200rpx;
          }
        }

      }
    }

    .result-main {
      width: 690rpx;
      overflow: hidden;
      zoom: 1;
      margin: 0 auto;
      border-radius: 12rpx;
      margin-top: 50rpx;

      .result-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .result-time {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .result-action {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FF5121;
        }
      }

      .wenti_desc {
        width: 100%;

        .wenti_desc_title {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-bottom: 20rpx;
        }

        .wenti_desc_info {
          width: 670rpx;
          overflow: hidden;
          zoom: 1;
          background: #F5F5F5;
          border-radius: 12rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          padding-left: 20rpx;
          margin-bottom: 20rpx;
        }
      }

      .service {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-top: 30rpx;
      }

      .pingjia {
        width: 650rpx;
        height: 64rpx;
        line-height: 64rpx;
        background: #FFE8E9;
        border-radius: 32rpx;
        padding: 0 20rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;

        .pj-btn {
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FF5121;
        }
      }

      .question-btn {
        width: 690rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background: #FFA000;
        border-radius: 6rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-top: 100rpx;
      }

      .new-question {
        width: 690rpx;
        overflow: hidden;
        zoom: 1;
        margin-top: 30rpx;

        .txt-desc3 {
          width: 690rpx;
          margin: 0 auto;
          margin-bottom: 60rpx;

          .txt-desc3-title {
            width: 100%;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            display: flex;
            justify-content: space-between;
            margin-bottom: 30rpx;
          }

          image {
            width: 172rpx;
            height: 172rpx;
          }
        }

        .new-question-title {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin: 20rpx 0;
        }

        textarea {
          width: 690rpx;
          height: 220rpx;
          background: #F5F5F5;
          border-radius: 12rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          color: #999999;
        }

        .new-question-btn {
          width: 690rpx;
          height: 88rpx;
          line-height: 88rpx;
          text-align: center;
          background: #FFA000;
          border-radius: 6rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          margin-top: 100rpx;
        }
      }
    }
  }
</style>